import { Button, Input, Space } from "antd";
import styles from "./QrCode.module.css";
import QRCode from "qrcode.react";
import React, { useEffect } from "react";
import { useState } from "react";
import GoBackHeader from "../../../../components/GoBackHeader";

const changeCanvasToPic = () => {
  const canvasImg = document.getElementsByTagName(
    "canvas"
  )[0] as HTMLCanvasElement; // 获取canvas类型的二维码
  const img = new Image();
  img.src = canvasImg.toDataURL("image/png"); // 将canvas对象转换为图片的data url
  const downLink = document.createElement("a");
  downLink.href = img.src;
  downLink.download = "qrCode";
  document.body.append(downLink);
  downLink.click();
  setTimeout(() => {
    downLink.remove();
  }, 1000);
};

type FormType = {
  size: number;
  text: string;
  focus: boolean;
  memo: string;
  [key: string]: Pick<FormType, keyof FormType>;
};

const SAMPLE = {
  size: 256,
  focus: false,
  memo: "",
  text: "http://laremehpe.eu.org:5173",
};

const QR_STORAGE_KEY = "QR_STORAGE_KEY";
// const QrCode =
export default () => {
  const { TextArea } = Input;
  const [formList, setFormList] = useState<FormType[]>([SAMPLE]);

  const addNewForm = () => setFormList((e) => [...e, SAMPLE]);
  const removeForm = (index: number) =>
    setFormList((e) => e.filter((val, seq) => seq !== index));
  const updateForm = (index: number, type: string, value: string) => {
    const newObj = [...formList];
    newObj[index][type] = value;
    setFormList(newObj);
  };
  const focusForm = (index: number) => {
    setFormList((e) => e.map((val, seq) => ({ ...val, focus: seq === index })));
  };
  const save = () => {
    localStorage.setItem(QR_STORAGE_KEY, JSON.stringify(formList));
  };

  useEffect(() => {
    const localHistory = localStorage.getItem(QR_STORAGE_KEY);
    if (localHistory) setFormList(JSON.parse(localHistory));
  }, []);

  return (
    <div className={styles.box}>
      <GoBackHeader />
      <div className={styles.addBox}>
        <Space>
          <Button type="primary" onClick={save}>
            save
          </Button>
          <Button type="primary" onClick={addNewForm}>
            add
          </Button>
        </Space>
      </div>
      <div className={styles.listBox}>
        {formList.map((val, index) => (
          <div className={styles.formBox} key={index}>
            <TextArea
              rows={1}
              placeholder="text"
              value={val.text}
              onChange={(e) => updateForm(index, "text", e.target.value)}
            />
            <Space>
              <Input
                placeholder="size"
                value={val.size}
                onChange={(e) => updateForm(index, "size", e.target.value)}
              />
              <Button type="primary" onClick={changeCanvasToPic}>
                Download
              </Button>
              <Button danger type="primary" onClick={() => removeForm(index)}>
                Remove
              </Button>
              <Button type="primary" onClick={() => focusForm(index)}>
                focus
              </Button>
              <Input
                placeholder="memo"
                value={val.memo}
                onChange={(e) => updateForm(index, "memo", e.target.value)}
              />
            </Space>
            <div className={styles.codeBox}>
              {val.focus ? <QRCode value={val.text} size={val.size} /> : <></>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
